<template>
  <div id="chart" style="height:600px" ref="chart">
   
  </div>
</template>

<script>
// @ is an alias to /src

import moment from 'moment';

export default {
  name: 'Views',
 data() {
  return {
    chart: null,
    dateArray:[]

    
  }
 },
 mounted () {
  this.week()
  // 在这里初始化 echarts 因为初始化要传实例

    this.initChart()
    
 },
 methods: {
  // 近一周的日期
  week () {
        var myDate = new Date() // 获取今天日期
        myDate.setDate(myDate.getDate() - 6)
        // var dateArray = []
        var dateTemp
        var flag = 1
        for (var i = 0; i < 7; i++) {
        dateTemp = (myDate.getMonth() + 1) + '-' + myDate.getDate()
        this.dateArray.push(dateTemp)
        myDate.setDate(myDate.getDate() + flag)
        }
        console.log('123456+', this.dateArray)
  },

  


  initChart(){
  // 初始化echarts
  this.chart = this.$echarts.init(this.$refs.chart)
      // 设置图表option(配置项)绘制图表
      // 绘制图表
      console.log(this.dateArray);
      this.chart.setOption({
        title: {
          text: '近一周内用户浏览量'
        },
        legend: {},
        tooltip: {},
        xAxis: {
          type:'category',
          name:'日期',
          boundaryGap:true,
          data:this.dateArray, 
			    nameGap: 7,//坐标轴名称与轴线之间的距离。
          axisTick: {//是否显示坐标轴刻度。
				inside: true//坐标轴刻度是否朝内，默认朝外。
			  }
        },
        yAxis: {
          type: 'value',
          name:'人/次',
          min:1000,
          max:10000,
        },
        backgroundColor: '#fff',
        color: ['#72ccff', '#d4a4eb'],
        series: [
          {
            name: '访问量',
            smooth: true,
            type: 'line', // 折线图
            data: [3000,5500,7800,6900,8900,8000,7300]
          },
           {
            smooth: true,
            type: 'bar', // 柱状图
            data: [3000,5500,7800,6900,8900,8000,7300],
            barWidth: '15%'
          }
        ]
 
      })
  },

  
},
 



}
</script>